<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>documentName</title>
    <link rel="stylesheet" href="" />
  </head>
  <body>
    <form action="" id="persondetail" method="post">
      <div>
        姓名：
        <input name="text1" type="text" class="inputbox" />
      </div>
      <div>
        年龄：
        <input name="text2" type="text" class="inputbox" />
      </div>
      <div>
        爱好：
        <input name="text3" type="text" class="inputbox" />
      </div>
      <div><input id="submitbtn" type="submit" value="提交" /></div>
    </form>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script>
    <script>
      var object = {
        url: 'http://geek.itheima.net/v1_0/authorizations', //form提交数据的地址
        type: 'POST', //form提交的方式(method:post/get)
        target: target, //服务器返回的响应数据显示的元素(Id)号
        beforeSerialize: function () {}, //序列化提交数据之前的回调函数
        beforeSubmit: function () {}, //提交前执行的回调函数
        success: function () {}, //提交成功后执行的回调函数
        error: function () {}, //提交失败执行的函数
        dataType: null, //服务器返回数据类型
        clearForm: true, //提交成功后是否清空表单中的字段值
        restForm: true, //提交成功后是否重置表单中的字段值，即恢复到页面加载时的状态
        timeout: 6000, //设置请求时间，超过该时间后，自动退出请求，单位(毫秒)。
      }

      //ajaxForm
      $(function () {
        $('form').ajaxForm(object)
      })

      //ajaxSubmit
      $(function () {
        $('#submitbtn').click(function () {
          $('form').ajaxSubmit(object)
        })
      })

      // 参数是一个回调
      $(function () {
        $('#submitbtn').click(function () {
          $('form').ajaxSubmit(function (data) {
            alert(data)
          })
        })
      })
    </script>
  </body>
</html>
